<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vuejs-2.5.16.js"></script>
    <script src="js/MyDate.js"></script>
</head>
<body>

   <div id="app">

       用户：<input type="text" v-model="emp.ename">
       部门：<select v-model="emp.did">
               <option value="0">--请选择--</option>
               <option v-for="v in dept" :value="v.did">{{v.dname}}</option>
            </select>
       <input type="button" value="查询" @click="findAll">
       <input type="button" value="添加" @click="add">
       <input type="button" value="批量删除" @click="batchDelete">
       <table border="1">
           <tr>
               <td><a href="#" @click="selectAll">全选</a>&nbsp;<a href="#" @click="selectNotAll">不选</a></td>
               <td>编号</td>
               <td>姓名</td>
               <td>性别</td>
               <td>爱好</td>
               <td>生日</td>
               <td>部门</td>
               <td>操作</td>
           </tr>
           <tr v-for="e in page.list">
               <td><input type="checkbox" v-model="ids" :value="e.eid"></td>
               <td>{{e.eid}}</td>
               <td>{{e.ename}}</td>
               <td>{{e.sex}}</td>
               <td>{{e.hobby}}</td>
               <td>{{format(e.birthday)}}</td>
               <td>{{e.dept.dname}}</td>
               <td><a href="#" @click="updateById(e.eid)">修改</a>
                   <a href="#" @click="deleteById(e.eid)">删除</a>
               </td>
           </tr>
       </table>
       <font style="color: red"> 当前第{{page.pageNum}}页，共{{page.pages}}页，总共{{page.total}}条数据</font><br>
       <input type="button" value="首页" @click="gotoPage(page.firstPage)">
       <input type="button" value="上一页" @click="gotoPage(page.prePage)" :title="page.prePage">
       <input type="button" v-for="i in page.lastPage" :value="i" @click="gotoPage(i)">
       <input type="button" value="下一页" @click="gotoPage(page.nextPage)" :title="page.nextPage">
       <input type="button" value="尾页" @click="gotoPage(page.lastPage)">
   </div>
   <script>
       var vm =new Vue({
           el :"#app",
           data:{
               page : [],
               emp:{
                   did : 0
               },
               dept:[],
               pages : 1,
               ids:[]
           },
           methods:{
               findAll(){
                   this.gotoPage(1);
               },
               format(v){
                   return new Date(v).Format('yyyy-MM-dd');
               },
               gotoPage(pageNum){
                   if(pageNum >0 && pageNum<=this.pages){
                       axios.post("../findAllEmp",{emp:this.emp,pageNum:pageNum}).then(function(response){
                           vm.page = response.data;
                           vm.pages = vm.page.pages;
                           if(vm.pages == 0){
                               vm.pages = 1;
                           }
                       });
                   }
               },
               findDept(){
                   axios.post("../findDept").then(function(response){
                       vm.dept = response.data;
                   });
               },
               add(){
                   location.href="toAdd";
               },
               updateById(eid){
                   location.href="toUpdate?eid="+eid;
               },
               deleteById(eid){
                   if(window.confirm("确定要删除编号为"+eid+"的数据吗？")){
                       axios.get("../deleteById?eid="+eid).then(function(response){
                           var result = response.data;
                           if(result =="SUCC"){
                               vm.findAll();
                           }else{
                               alert("删除失败");
                           }
                       });
                   }
               },
               batchDelete(){
                   if(this.ids.length>0){
                       axios.get("../batchDelete?ids="+this.ids).then(function(response){
                           var result = response.data;
                           if(result =="SUCC"){
                               //location.href="list.html";
                               vm.findAll();
                           }else{
                               alert("删除失败");
                           }
                       });
                   }else{
                       alert("无选择数据");
                   }
               },
               //全选
               selectAll(){
                   //把整页id放到我们数组 ids 即可
                   var list = this.page.list;
                   this.ids=[];
                   for(var i=0;i<list.length;i++){
                       var id = list[i].eid;
                       console.info("////////"+id);
                       this.ids.push(id);
                   }
                   console.info(this.ids);
               },
               //全不选
               selectNotAll(){
                   this.ids=[];
               }
           },
           created(){
               this.findDept();
               this.findAll();
           }
       });
   </script>
</body>
</html>